<template>
  <div class="alarm">
    <h1>{{ countDown$ }}</h1>
    <button :disabled="disable$" v-stream:click="snooze$" class="button is-success">Snooze</button>
    <button :disabled="disable$" v-stream:click="dismiss$" class="button is-danger">Stop</button>
  </div>
</template>

<script>
/* eslint-disable */
import { Observable } from 'rxjs';

export default {
  domStreams: ["snooze$", "dismiss$"],
  subscriptions() {
    const countDown$ = Observable.interval(250)
      .startWith(5)
      .scan(halo => halo - 1)
      .takeWhile(halo => halo > 0)
      .concat(Observable.of("Wake up buddy 💣"))
      .share()
      .repeatWhen(() =>
        this.snooze$.takeUntil(this.dismiss$) 
      )
      .concat(Observable.of("Wish you the best day! 😁")
      )
      .shareReplay()

      const disable$ = countDown$.map(
        value => value !== "Wake up buddy 💣"
      )
    return {
      countDown$,
      disable$
    }
  }
}
</script>


<style>
.alarm {
  display: flex;
  width: 100%;
  justify-content: center;
  position: absolute;
  top: 50%;
  /* align-items: center; */
}

.alarm h1 {
  width: 500px;
  border: 1px solid black;
  height: auto;
  margin: 12px;
  text-align: center;
}

.button {
  width: 100px;
  height: 50px;
  margin: 12px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.is-danger {
  background-color: red;
}

.is-success {
  background-color: green;
}
</style>
